<%--
  Created by IntelliJ IDEA.
  User: 徐贺
  Date: 2021/6/13
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<script src="js/jquery.min.js"></script>
<style>
    body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
        overflow: hidden;
    }
    #bg1{
        position: absolute;
        width: 100%;
        height: 100%;
        background: url("images/1.jpg");
    }
    #bg2{
        position: absolute;
        height: 100%;
        width: 100%;
        background: url("/images/1.jpg");
    }
    #container{
        position: absolute;
        background: #fff;
        height: 300px;
        width: 100%;
        top: 50%;
        margin-top: -150px;
        opacity: 0.4;
    }
    #loginContainer{
        position: absolute;
        height: 400px;
        width: 300px;
        top: 50%;
        right: 10%;
        margin-top: -200px;
        background: #fff;
        opacity: 0.5;
        border-radius: 5px;
        z-index: 50;
    }
    #loginHeader{
        position: absolute;
        height: 50px;
        width: 300px;
        top: 50%;
        right: 10%;
        margin-top: -190px;
        z-index: 80;
    }
    #photo{
        position: absolute;
        top: 28%;
        right:19%;
        z-index:90;

    }
    #photo img{
        height: 120px;
        width: 150px;
    }
    #loginHeader span{
        margin-left: 20px;
        text-align: center;
        font-weight: bolder;
        color: #0e475a;
    }
    #loginHeader hr{
        margin: 3px 20px 3px;
    }
    #loginContent{
        position: absolute;
        width: 300px;
        height: 200px;
        top: 70%;
        right: 10%;
        margin-top: -150px;
        z-index: 80;
    }
    #loginContent form{
        margin-left: 20px;
    }
    .loginLabel{
        font-weight: bolder;
        font-size: 14px;
        color: #0e475a;
    }
    .loginInput{
        width: 260px;
        height: 30px;
        padding: 3px 0;
        font-size: 12px;
        color: #797979;
        border: 1px solid #797979;
        margin-bottom: 10px;

    }
    .loginInput:focus{
        outline: none;
        border: 1px solid #2ca8be;
    }
    #loginBtn{
        width: 260px;
        height: 25px;
        margin-top: 10px;
        border: 1px solid #2ca8be;
        background: #2ca8be;
        font-weight: bolder;
        color: #fff;
    }
    #RegisterBtn{
        width: 260px;
        height: 25px;
        margin-top: 10px;
        border: 1px solid #2ca8be;
        background: #2ca8be;
        font-weight: bolder;
        color: #fff;
    }
    #vistorBtn{
        width: 260px;
        height: 25px;
        margin-top: 10px;
        border: 1px solid #2ca8be;
        background: #2ca8be;
        font-weight: bolder;
        color: #fff;
    }

</style>
<head>
    <title>Title</title>
</head>
<script type="text/javascript">
    function message () {
        var message="${message}"
        if( message !=""){
            alert(message);
        }
    }
</script>
<body onload="message()">
<div id='bg1'></div>
<div id='bg2'></div>
<div id='container'></div>
<div id='loginContainer'>

</div>
<div id='loginHeader'>
    <span>用户登录中心</span>
    <hr size="3px" color="#2ca8be" />

</div>
<div id='photo'>
    <img src="images/icon.jpg" style="border-radius: 20%">
</div>
<div id='loginContent'>
<form action="login" method="post">
    <label for="userid" class="loginLabel">用户名</label>
    <br/>
    <input id="userid" class="loginInput" type="text" placeholder="请输入用户名" name="userid" />
    <br/>
    <label for="password" class="loginLabel">密码</label>
    <br/>
    <input id="password" class="loginInput" type="password" placeholder="请输入密码" name="password" />
    <br/>
    <input type="submit" value="登录" id="loginBtn" onclick="return checkForm()"/>

</form>
    <form action="register.jsp" method="post">
        <input type="submit" value="注册" id="RegisterBtn" />
    </form>
    <a href="home_index" id="vistorBtn" >游客登录</a>


</div>
<div>

</div>


<script>
    function checkForm(){
        //是否为空
        function ifnull(txt){
            if(txt.length==0){
                return true;
            }
            var $reg=/\s+/;
            return $reg.test(txt);
        }

        //验证用户名
        if(ifnull($("#userid").val())){
            alert("用户名不能为空");
            return false;
        }
        //验证密码
        if(ifnull($("#password").val())){
            $("span").show().text("密码不能为空");
            return false;
        }else{
            var $reg=/^\w{6,}$/;
            if(!$reg.test($("#password").val())){
                $("span").show().text("密码至少6位");
                return false;
            }
        }
        return true;
    }
</script>
</body>
</html>
